<template>
	<van-tabbar v-model="selectedTab" fixed route active-color="#0000ff">
		<van-tabbar-item v-for="(item,i) in tabbarItems" :key="i" :class="item.icon"
			:to="{name:item.routeName}">
			<span>{{item.title}}</span>
		</van-tabbar-item>
		<a class="tab-item">
			<div class="circle" @click="fabu()">
				<img src="../assets/images/add.png" alt="" >
			</div>
		</a>
	</van-tabbar>
</template>

<script>
	export default {
		name: "footerNav",
		data() {
			return {
				selectedTab: 0, //选中的TabBar
				tabbarItems: [{
						title: "首页",
						routeName: "home",
						icon: 'iconfont icon-shouye',
					},
					{
						title: "社区",
						routeName: "community",
						icon: 'iconfont icon-shequ',
					},
					{
						title: "学习",
						routeName: "study",
						icon: 'iconfont icon-xuexi',
					},
					{
						title: "我的",
						routeName: "my",
						icon: 'iconfont icon-wode',
					},
				],
			};
		},
		methods:{
			fabu(){
				this.$router.push({ path: "/release" });
			}
		}
	};
</script>

<style>
	.circle {
		position: fixed;
		width: 50px;
		height: 50px;
		background-color: blue;
		bottom: 23px;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-radius: 50%;
		box-shadow: 0px 5px 10px #9d9d9d;
	}

	.circle img {
		position: relative;
		top: 10px;
		left: 10px;
		width: 60%;
	}
</style>
